import {
  GridProps,
  GridItemProps,
  FormItemProps as FormItemOriginProps,
  InputProps,
  SelectProps,
  TreeSelectProps,
  CascaderProps,
  DatePickerProps,
  SwitchProps,
  CheckboxProps,
  CheckboxGroupProps,
  RadioProps,
  RadioGroupProps,
  InputNumberProps,
  TimePickerProps,
  ColorPickerProps,
  SliderProps,
  TransferProps
} from 'naive-ui'
import { StyleValue } from 'vue'

export type InputForm = InputProps & {
  formType: 'input'
  // 是否只允许输入Int类型
  isInt?: boolean
  // 是否允许输入小数
  isDouble?: boolean
  // 允许的小数点数量
  doubleCount?: number
  //表单项(不包括label的外层的style属性对象)属性
  styleProps?: StyleValue
}
export type TextareaForm = InputProps & {
  formType: 'textarea'
  styleProps?: StyleValue
}
export type SelectForm = SelectProps & {
  formType: 'select'
  styleProps?: StyleValue
  // 字典值
  dictCode?: string
}
export type TreeSelectForm = TreeSelectProps & {
  formType: 'treeSelect'
  styleProps?: StyleValue
  // 字典值
  dictCode?: string
}
export type CascaderForm = CascaderProps & {
  formType: 'cascader'
  styleProps?: StyleValue
}
export type DatePickerForm = DatePickerProps & {
  formType: 'date'
  styleProps?: StyleValue
}
export type TimePickerForm = TimePickerProps & {
  formType: 'time'
  styleProps?: StyleValue
}
export type SwitchForm = SwitchProps & {
  formType: 'switch'
  styleProps?: StyleValue
}
export type InputNumberForm = InputNumberProps & {
  formType: 'inputNumber'
  styleProps?: StyleValue
}
export type ColorPickerForm = ColorPickerProps & {
  formType: 'color'
  styleProps?: StyleValue
}
export type SliderForm = SliderProps & {
  formType: 'slider'
  styleProps?: StyleValue
}
export type TransferForm = TransferProps & {
  formType: 'transfer'
  styleProps?: StyleValue
}
export type CheckboxForm = CheckboxProps & {
  formType: 'checkbox'
  styleProps?: StyleValue
  content?: string
  renderContent?: () => JSX.Element
}
export type CheckboxGroupForm = CheckboxGroupProps & {
  formType: 'checkboxGroup'
  styleProps?: StyleValue
  content?: string
  renderContent?: () => JSX.Element
}
export type RadioForm = RadioProps & {
  formType: 'radio'
  styleProps?: StyleValue
  content?: string
  renderContent?: () => JSX.Element
}
export type RadioGroupForm = RadioGroupProps & {
  formType: 'radioGroup'
  styleProps?: StyleValue
  content?: string
  renderContent?: () => JSX.Element
}
export type CustomForm = {
  formType: 'custom'
  styleProps?: StyleValue
  render: () => JSX.Element
}

type FormTypeProps =
  | InputForm
  | TextareaForm
  | SelectForm
  | TreeSelectForm
  | CascaderForm
  | DatePickerForm
  | TimePickerForm
  | SwitchForm
  | CheckboxForm
  | CheckboxGroupForm
  | RadioForm
  | RadioGroupForm
  | InputNumberForm
  | ColorPickerForm
  | SliderForm
  | TransferForm
  | CustomForm

type FormCommmonProps = {
  /**
   * 用于作为form对象的键值
   */
  key: string

  /**
   * form列表项的类型
   */
  formType?: string

  /**
   * 控制显隐藏
   */
  visiable?: boolean
}

export type FormItemProps = FormItemOriginProps &
  FormCommmonProps &
  FormTypeProps & { styleProps?: StyleValue }

// 列表项
export type ColumnItem = {
  /**
   * form布局单个配置对象 支持Naive-UI的gridItemProps的所有属性
   */
  gridItem?: GridItemProps

  /**
   * form列表项配置对象
   */
  formItem: FormItemProps
}

export type ProFormOption = {
  grid?: GridProps
  columnItemList?: ColumnItem[]
}

export type ProFormOptions = ProFormOption[]

export type ProFormInst = {
  validateByYourSelf: (errors?: any) => boolean
  validateByOneRule: (func: any, ruleFunc: any) => void
  handleSubmit: () => boolean
  handleReset: () => void
  moveToErr: (proFormRefName: string) => void
}
